<style>
  .comments_detail .product {
    height: 180px;
    background: #f6f6f6;
    display: flex;
  }

  .comments_detail .product-images {
    width: 180px;
    height: 180px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .comments_detail .product-images img {
    width: 180px;
    height: 180px;
    object-fit: cover;
  }

  .comments_detail .product-comment {
    padding:0 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow:hidden;
  }

  .comments_detail .product-comment .product-comment-btn {
    min-height: 24px;
    text-align: center;
    font-size: 14px;
    font-weight: 300;
    margin-top: 16px;
    display: inline-block;
  }

  .comments_detail .product-comment .product-comment-total {
    font-size: 14px;
    font-weight: 300;
    color: #888888;
    margin-top: 16px;

  }
  .comments_detail .product-comment .comment-product-title{
    font-size: 14px;
    color: var(--title_color);
    text-align: left;
  }

  .comments_detail .product-comment-fraction {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }

  .comments_detail .product-comment-fraction svg {
    margin-right: 4px;
  }

  .comments_detail .product-comment-fraction>svg:last-child {
    margin-right: 0;
  }

  .comments_detail .product-comment-fraction span {
    font-weight: 500;
    color: var(--title_color);
    font-size: 24px;
    line-height: 24px;
    margin-left: 10px;
  }

  .comments_detail .product-proportion {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 40px;
    flex-shrink: 0;
  }

  .comments_detail .product-proportion-row {
    display: flex;
    align-items: center;

  }
  .cursor-star{
    cursor: pointer;
  }

  .comments_detail .product-proportion-row+.product-proportion-row {
    margin-top: 6px;
  }

  .comments_detail .product-proportion-fraction {
    width: 160px;
    height: 10px;
    background: #dddddd;
    margin: 0 4px;
    position: relative;
  }

  .comments_detail .product-comment-total-progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #BBBBBB;
    z-index: 10;
  }

  .comments_detail .product-proportion-number {
    font-weight: 300;
    color: #1d1f21;
    font-size: 14px;
  }

 


  .comments_detail .comment-star-warp {
    position: relative;
    display: flex;
    align-items: center;
  }

  .comments_detail .comment-star-warp-choose {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .comments_detail .comment-star-warp-choose svg {
    flex-shrink: 0;
  }


  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .comments_detail .product {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #fff;
      padding-bottom:30px;
    }

    .comments_detail .product .product-images {
      width: 100%;
      height: auto;
    }

    .comments_detail .product .product-images img {
      width: 100%;
      height: auto;
    }

    .comments_detail .product .product-comment {
      margin-left: 0;
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;

    }

    .comments_detail .product .product-proportion {
      margin-left: 0;
      width: 100%;
      align-items: center;
      margin-top: 30px;
      padding: 0;
    }

    .comments_detail .comment_container {
      column-count: 1;
    }

    .comments_detail .product-comment .comment-product-title{
      text-align: center;
    }
  }
  @media screen and (max-width: 767px){
    .comments_detail .product {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #fff;
    }

    .comments_detail .product .product-images {
      width: 100%;
      height: auto;
    }

    .comments_detail .product-comment .comment-product-title{
      text-align: center;
    }

    .comments_detail .product .product-images img {
      width: 100%;
      height: auto;
    }

    .comments_detail .product .product-comment {
      margin-left: 0;
      margin-top: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;

    }
    .comments_detail .product-comment .product-comment-total{
      margin-top: 10px;
    }

    .comments_detail .product .product-proportion {
      margin-left: 0;
      margin-top: 15px;
      padding: 0 0 15px 0;
    }
    .comments_detail .comments_detail-comment-wrap{
      margin-top: 15px;
    }

    /* .comment-reply-warp{
      padding: 15px 0 0 0 !important;
    } */
    .comments_detail .comment_container {
      column-count: 1;
    }
  }

  .moi-write-comment .header .header-score .score-icon-active path {
    fill: {{theme_config.global.product_score_selected_color | default:'#F8AD6B'}};
}
select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: none;
            background: none;
            padding: 0;
            margin: 0;
            font: inherit;
            color: inherit;
            outline: none;
        }

        
        .custom-select {
          font-family: Montserrat, Montserrat;
            min-width: 155px;
            height: 40px;
            border: 1px solid #DDDDDD;
            cursor: pointer;
            padding: 0 20px 0 10px;
            box-sizing: border-box;
            font-size: 14px;
            font-weight: 400;
            color: #1D1F21;
        }

        
        .custom-select-wrapper {
            position: relative;
            display: inline-block;
        }

        .custom-select-wrapper::after {
            content: '';
            position: absolute;
            right:  10px;
            top: 17px;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 6px solid black;
        }


  .drawer-header{
    height:56px;
    text-align: center;
    line-height: 56px;
    position: relative;
  }
  .drawer-header df-oemdrawer-close{
    position: absolute;
    right: 15px;
    top: 15px;
  }
 df-oemdrawer-popup .drawer-footer{
    padding: 20px 15px;
    border-top:1px solid #DDDDDD;
  }
  .drawer-body{
    padding: 0 15px;
    max-height: 60vh;
    overflow-y: auto;
  }
  .filter-button{
    height: 36px;
    padding: 0 10px;
    border: 1px solid #1D1F21;
    border-radius: 4px;
    display: inline-flex;
  }
  .drawer-footer .drawer-btn{
    margin-top: 0;
  }
  .web_filter_clear{
    height: 60px;
    line-height: 60px;
    text-decoration: underline;
    display: none;
    cursor: pointer;
  }

  .collection-filter-box{
    width:18%;margin-right: 4%;
    display: block;
  }

  .filter-box .checkbox_label .check_icon{
    flex-shrink: 0;
  }
  .collection_detail_default .collection-filter-wap{
    justify-content: space-between;
  }
  @media screen and (min-width: 767px) {
    .collection-filter-sticky{
      position:sticky;
      top:0;
    }
  }
  @media screen and (max-width: 767px) {
    .collection-filter-box{
      display: none;
    }
  
  }



   df-oemdrawer-popup {
    position: fixed;
    z-index: 50102;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    display: none;
  }

  .df-oemdrawer-open df-oemdrawer-popup {
    display: flex;
  }

  .df-oemdrawer-open .df-oemdrawer-popup-open[position="left"],
  .df-oemdrawer-open .df-oemdrawer-popup-open[position="right"] {
    transform: translateX(0);
  }

  .df-oemdrawer-open .df-oemdrawer-popup-open[position="top"],
  .df-oemdrawer-open .df-oemdrawer-popup-open[position="bottom"] {
    transform: translateY(0);
  }
  .drawer-cover{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 10;

  }
   df-oemdrawer-popup-warp {
    background-color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 100;
  }

   df-oemdrawer-popup-warp[position="left"] {
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    transform: translateX(-100%);
    height: 100%;
    transition: all 0.35s ease-in-out;
  }

   df-oemdrawer-popup-warp[position="right"] {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    transform: translateX(100%);
    height: 100%;
    transition: all 0.35s ease-in-out;
  }

   df-oemdrawer-popup-warp[position="top"] {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    transform: translateY(-100%);
    transition: all 0.35s ease-in-out;
  }

 
   df-oemdrawer-popup-warp[position="bottom"] {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    transform: translateY(100%);
    transition: all 0.35s ease-in-out;
  }
  .filter-box .filter-box-item{
    padding:0;
    display:flex;
    line-height: 18px;
    justify-content: start;
    text-align: left;
    margin-bottom: 20px;
  }


   df-oemmenu{
    display: block;
    width:100%;
  }
   df-oemmenu + df-oemmenu{
    border-top:1px solid #ddd
  }
   df-oemmenu df-oemmenu-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    min-height:40px;
    padding:6px 20px 6px 0;
    font-weight: bold;
    cursor: pointer;
    position: relative;
  }
   df-oemmenu df-oemmenu-label::before {
    position: absolute;
    top: 50%;
    right: 0;
    width: 16px;
    height: 1px;
    background-color: var(--menu-color, #000);
    content: "";
  }
   df-oemmenu df-oemmenu-label::after {
    position: absolute;
    right: 8px;
    top: 50%;
    bottom: 0;
    height: 16px;
    width: 1px;
    margin-top: -8px;
    opacity: 1;
    background-color: var(--menu-color, #000);
    transition: all 0.2s;
    content: "";
  }

  df-oemmenu-warp{
    display:block;
  }
 df-oemmenu df-oemmenu-warp {
    display: none;
  }

 .df-oemmenu-acrive  df-oemmenu-warp {
    display: block;
  } 
  .df-oemmenu-acrive df-oemmenu-label::after {
    transform: rotate(270deg);
    opacity: 0 !important;

  }
  .checkbox_label .check_icon{
    border-radius: 50%;
  }

  #is_image option:nth-child(1) {
    display: none;
  }
  #star_eq option:nth-child(1) {
    display: none;
  }
  #star_eq option:nth-child(1),#star_eq option:nth-child(2) {
    letter-spacing: 0;
  }
  
  #comments_detail .video-icon{
   position: absolute;
  z-index: 100;
  top: 40px;
  left: 40px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: none;
  }
</style>

<div class="comments_detail container_wrapper" id="comments_detail">
  <h1 class="title">{{lang.comments.title}}</h1>

  <div class="product">
    <a class="product-images" href="/products/{{ product_comment.product.handle}}?data_from={{data_from}}">
    {%- if product_comment.product.image.alt == "" -%}
      {% assign product_alt = product_comment.product | image_alt:'product'  %}
    {%- else -%}
        {% assign product_alt = product_comment.product.image.alt %}
    {%- endif -%}
      <img  data-src="{{ product_comment.product.src|public_front_asset_url }}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}" alt="{{product_alt}}" />
    </a>
    <div class="product-comment">
      <a class="comment-product-title line-clamp2" href="/products/{{ product_comment.product.handle }}?data_from={{data_from}}">{{product_comment.product.title}}</a>
      <div class="product-comment-fraction">
        <div class="comment-star-warp">
          {% assign score_uncheck_color = theme_config.global.product_score_uncheck_color | default:'#bbbbbb' %}
          {% assign score_selected_color = theme_config.global.product_score_selected_color | default:'#F8AD6B' %}
          {% for index in (1..5) %}
          {% include icon_block_star , width:"24",height:"24", color: score_uncheck_color %}
          {% endfor %}
          {% assign star = 0 %}
          {% if  product_comment.product.star %}  {% assign star = product_comment.product.star | divided_by: 5 | times:100 %} {% endif %}
          <div class="comment-star-warp-choose" style="width:{{star}}%">
            {% for index in (1..5) %}
            {% include icon_block_star , width:"24",height:"24",color: score_selected_color %}
            {% endfor %}
          </div>
        </div>
        <span>{{product_comment.product.star}}</span>
      </div>
      {% if storeConfig.customer_comment_status == 1 %}
      <div>
      <a href="javascript:;" class="secondary_btn product-comment-btn write-comment">
        {{lang.comments_detail.write}}
      </a>
      </div>
      {% endif %}
    </div>
    <div class="product-proportion">
      <div class="product-proportion-row {% if product_comment.product.star_list.fifth > 0 %}cursor-star{% endif %}"  data-value="5"  {% if star_eq and star_eq != 5 %} style="opacity: 0.4;" {% endif %}>
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          {%- capture fill_color -%}
          {{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}
          {%- endcapture -%}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{{fill_color}}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
        {% if  product_comment.product.star_list.fifth %}
          <div class="product-comment-total-progress" style="background-color: {% if star_eq and star_eq == 5 %}#FF8316{% endif %};width:{{ product_comment.product.star_list.fifth | divided_by: product_comment.product.comment_total_count | times: 100 }}%"></div>
        {% endif %}

        </div>
        <div class="product-proportion-number" style="color: {% if star_eq and star_eq == 5 %}#FF8316{% endif %};">（{{product_comment.product.star_list.fifth}}）</div>
      </div>
      <div class="product-proportion-row {% if product_comment.product.star_list.fourth > 0 %}cursor-star{% endif %}"  data-value="4"  {% if star_eq and star_eq != 4 %} style="opacity: 0.4;" {% endif %}>
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          {%- capture fill_color -%}
          {%- if index <= 4 -%}
            {{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}
            {%- else -%}
            {{theme_config.global.product_score_uncheck_color | default:'#bbbbbb'}} 
          {%- endif -%}
          {%- endcapture -%}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{{fill_color}}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
         {% if  product_comment.product.star_list.fourth %}
                  <div class="product-comment-total-progress" style="background-color: {% if star_eq and star_eq == 4 %}#FF8316{% endif %};width:{{ product_comment.product.star_list.fourth | divided_by: product_comment.product.comment_total_count | times: 100 }}%"></div>
         {% endif %}

        </div>
        <div class="product-proportion-number" style="color: {% if star_eq and star_eq == 4 %}#FF8316{% endif %};">（{{product_comment.product.star_list.fourth}}）</div>
      </div>
      <div class="product-proportion-row {% if product_comment.product.star_list.third > 0 %}cursor-star{% endif %}"  data-value="3"  {% if star_eq and star_eq != 3 %} style="opacity: 0.4;" {% endif %}>
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          {%- capture fill_color -%}
          {%- if index <= 3 -%}
            {{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}
            {%- else -%}
            {{theme_config.global.product_score_uncheck_color | default:'#bbbbbb'}} 
          {%- endif -%}
          {%- endcapture -%}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{{fill_color}}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
         {% if  product_comment.product.star_list.third %}
           <div class="product-comment-total-progress" style="background-color: {% if star_eq and star_eq == 3 %}#FF8316{% endif %};width:{{ product_comment.product.star_list.third | divided_by: product_comment.product.comment_total_count | times: 100 }}%"></div>
         {% endif %}

        </div>
        <div class="product-proportion-number" style="color: {% if star_eq and star_eq == 3 %}#FF8316{% endif %};">（{{product_comment.product.star_list.third}}）</div>
      </div>
      <div class="product-proportion-row {% if product_comment.product.star_list.second > 0 %}cursor-star{% endif %}"  data-value="2"  {% if star_eq and star_eq != 2 %} style="opacity: 0.4;" {% endif %}>
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          {%- capture fill_color -%}
          {%- if index <= 2 -%}
            {{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}
            {%- else -%}
            {{theme_config.global.product_score_uncheck_color | default:'#bbbbbb'}} 
          {%- endif -%}
          {%- endcapture -%}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{{fill_color}}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
          {% if  product_comment.product.star_list.second %}
              <div class="product-comment-total-progress" style="background-color: {% if star_eq and star_eq == 2 %}#FF8316{% endif %};width:{{ product_comment.product.star_list.second | divided_by: product_comment.product.comment_total_count | times: 100 }}%"></div>
          {% endif %}
        </div>
        <div class="product-proportion-number" style="color: {% if star_eq and star_eq == 2 %}#FF8316{% endif %};">（{{product_comment.product.star_list.second}}）</div>
      </div>
      
      <div class="product-proportion-row {% if product_comment.product.star_list.first > 0 %}cursor-star{% endif %}"  data-value="1"  {% if star_eq and star_eq != 1 %} style="opacity: 0.4;" {% endif %}>
        <div class="product-proportion-star">
          {% for index in (1..5) %}
          {%- capture fill_color -%}
          {%- if index <= 1 -%}
            {{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}
            {%- else -%}
            {{theme_config.global.product_score_uncheck_color | default:'#bbbbbb'}} 
          {%- endif -%}
          {%- endcapture -%}
          <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{{fill_color}}" p-id="7122"></path>
          </svg>
          {% endfor %}
        </div>
        <div class="product-proportion-fraction">
           {% if  product_comment.product.star_list.first %}
           <div class="product-comment-total-progress" style="background-color: {% if star_eq and star_eq == 1 %}#FF8316{% endif %};width:{{ product_comment.product.star_list.first | divided_by: product_comment.product.comment_total_count | times: 100 }}%"></div>
           {% endif %}

        </div>
        <div class="product-proportion-number" style="color: {% if star_eq and star_eq == 1 %}#FF8316{% endif %};">（{{product_comment.product.star_list.first}}）</div>
      </div>
    </div>
  </div>

  <div class="df-hidden md:df-flex" style="margin-top: 40px;justify-content: space-between;">
    <div style="display: flex;align-items: center;">
      <div class="df-hidden md:df-flex" style="align-items: center;">
        <div class="custom-select-wrapper">
        <select class="custom-select" id="is_image">
          <option value="">{{lang.general.all}}</option>
          <option value="0">{{lang.general.all}}</option>
          <option value="1" {% if is_image == 1 %}selected="selected" {% endif %}>{{lang.general.with_images}}</option>
        </select>
        </div>
      </div>
      <div class="df-hidden md:df-flex" style="align-items: center;margin-left: 8px;">
        <div class="custom-select-wrapper">
        <select class="custom-select" id="star_eq">
          <option value="">{{lang.general.rating}}</option>
          <option value="0">{{lang.general.all}}</option>
          <option value="5" {% if star_eq == 5 %}selected="selected" {% endif %}>&#9733; &#9733; &#9733; &#9733; &#9733;</option>
          <option value="4" {% if star_eq == 4 %}selected="selected" {% endif %}>&#9733; &#9733; &#9733; &#9733; &#x2606;</option>
          <option value="3" {% if star_eq == 3 %}selected="selected" {% endif %}>&#9733; &#9733; &#9733; &#x2606; &#x2606;</option>
          <option value="2" {% if star_eq == 2 %}selected="selected" {% endif %}>&#9733; &#9733; &#x2606; &#x2606; &#x2606;</option>
          <option value="1" {% if star_eq == 1 %}selected="selected" {% endif %}>&#9733; &#x2606; &#x2606; &#x2606; &#x2606;</option>
        </select>
        </div>
      </div>
    </div>
    <div class="df-hidden md:df-flex" style="align-items: center;">
      <span style="display:inline-block; margin-right: 10px;">{{ lang.general.sort_by }}</span>
      <div class="custom-select-wrapper">

      <select class="custom-select" id='sort_by'>
        {% assign sort_by = sort_by  | lstrip %}
        {% for option in sort_options %}
        <option value="{{option.value}}" {% if option.value == sort_by %}selected="selected" {% endif %}>{{ option.name }}</option>
        {% endfor %}
      </select>
      </div>

    </div>
  </div>

  <df-oemdrawer class="df-block md:df-hidden" style="margin-top: 25px;">
    <df-oemdrawer-label class="df-flex df-items-center filter-button">
      <svg t="1676972155640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8122" width="24" height="24"><path d="M192 352m32 0l512 0q32 0 32 32l0 0q0 32-32 32l-512 0q-32 0-32-32l0 0q0-32 32-32Z" fill="#1D1F21" p-id="8123"></path><path d="M192 640m32 0l512 0q32 0 32 32l0 0q0 32-32 32l-512 0q-32 0-32-32l0 0q0-32 32-32Z" fill="#1D1F21" p-id="8124"></path><path d="M288 288m32 0l0 0q32 0 32 32l0 128q0 32-32 32l0 0q-32 0-32-32l0-128q0-32 32-32Z" fill="#1D1F21" p-id="8125"></path><path d="M608 576m32 0l0 0q32 0 32 32l0 128q0 32-32 32l0 0q-32 0-32-32l0-128q0-32 32-32Z" fill="#1D1F21" p-id="8126"></path></svg>
      <span style="margin-left: 5px;">{{lang.collections.detail.filter}}</span>
    </df-oemdrawer-label>
    <df-oemdrawer-popup>
      <df-oemdrawer-close class="drawer-cover drawer-close"></df-oemdrawer-close>
      <df-oemdrawer-popup-warp position="bottom">
        <div class="df-w-screen">
          <div class="drawer-header">
            <span class="df-font-bold" >{{lang.collections.detail.filter}}</span>
            <df-oemdrawer-close class="df-flex df-items-center drawer-close">
              <svg t="1676972642582" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8275" width="20" height="20"><path d="M571.008 511.936l313.088-311.04a42.688 42.688 0 0 0 0-58.816l-2.496-2.496a40.384 40.384 0 0 0-56.704 0l-313.088 313.6-313.088-311.04a40.384 40.384 0 0 0-56.704 0l-2.496 2.496a42.688 42.688 0 0 0 0 58.816l313.088 308.608-313.088 311.04a42.688 42.688 0 0 0 0 58.816l2.496 2.496a40.384 40.384 0 0 0 56.704 0l313.088-313.6 313.088 311.04a40.384 40.384 0 0 0 56.704 0l2.496-2.496a42.688 42.688 0 0 0 0-58.816z" fill="#1D1F21" p-id="8276"></path></svg>
            </df-oemdrawer-close>
          </div>
          <div class="drawer-body collection-mobile-filter">
            <df-oemmenu class='df-block md:df-visible'>
              <df-oemmenu-label>
                <div >{{lang.general.sort_by}}</div>
              </df-oemmenu-label>
              <df-oemmenu-warp>
                <div class="filter-box">
                    {% for option in sort_options %}
                      <label class="filter-box-item checkbox_label mo-checkbox" >  
                        {% assign sort_by = sort_by | lstrip %}
                        <input class=" mo-checkbox_input order_checkbox" type="radio" style=" flex-shrink: 0;" {% if option.value == sort_by %}checked{% endif %}   name="sort_by" value="{{option.value}}"/>
                        <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>{{option.name}}
                      </label>
                    {% endfor %}
                </div>
              </df-oemmenu-warp>
            </df-oemmenu>
              <df-oemmenu >
                <df-oemmenu-label>
                  <div >{{lang.general.images}}</div>
                </df-oemmenu-label>
                <df-oemmenu-warp>
                    <div class="filter-box">
                      <label class="filter-box-item checkbox_label mo-checkbox" >  
                        <input class=" mo-checkbox_input order_checkbox " {% if is_image == 0 %}checked{% endif %}  style=" flex-shrink: 0;" type="radio" name="is_image" value="0"/>
                        <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>{{lang.general.all}}
                      </label>
                      <label class="filter-box-item checkbox_label mo-checkbox" >  
                        <input class=" mo-checkbox_input order_checkbox " {% if is_image == 1 %}checked{% endif %}  style=" flex-shrink: 0;" type="radio" name="is_image" value="1"/>
                        <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>{{lang.general.with_images}}
                      </label>
                    </div>
                </df-oemmenu-warp>
              </df-oemmenu>
              <df-oemmenu style="border-top: 1px solid #E9E9E9;">
                <df-oemmenu-label>
                  <div >{{lang.general.rating}}</div>
                </df-oemmenu-label>
                <df-oemmenu-warp>
                    <div class="filter-box star-filter-box">
                      <label class="filter-box-item checkbox_label mo-checkbox" >  
                        <input class=" mo-checkbox_input order_checkbox " {% if star_eq == 0 %}checked{% endif %}  style=" flex-shrink: 0;" type="radio" name="star_eq" value="0"/>
                        <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>{{lang.general.all}}
                      </label>
                      <label class="filter-box-item checkbox_label mo-checkbox" >  
                        <input class=" mo-checkbox_input order_checkbox " {% if star_eq == 5 %}checked{% endif %}  style=" flex-shrink: 0;" type="radio" name="star_eq" value="5"/>
                        <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>&#9733; &#9733; &#9733; &#9733; &#9733;
                      </label>
                      <label class="filter-box-item checkbox_label mo-checkbox" >  
                        <input class=" mo-checkbox_input order_checkbox " {% if star_eq == 4 %}checked{% endif %}  style=" flex-shrink: 0;" type="radio" name="star_eq" value="4"/>
                        <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>&#9733; &#9733; &#9733; &#9733; &#x2606;
                      </label>
                      <label class="filter-box-item checkbox_label mo-checkbox" >  
                        <input class=" mo-checkbox_input order_checkbox " {% if star_eq == 3 %}checked{% endif %}  style=" flex-shrink: 0;" type="radio" name="star_eq" value="3"/>
                        <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>&#9733; &#9733; &#9733; &#x2606; &#x2606;
                      </label>
                      <label class="filter-box-item checkbox_label mo-checkbox" >  
                        <input class=" mo-checkbox_input order_checkbox " {% if star_eq == 2 %}checked{% endif %}  style=" flex-shrink: 0;" type="radio" name="star_eq" value="2"/>
                        <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>&#9733; &#9733; &#x2606; &#x2606; &#x2606;
                      </label>
                      <label class="filter-box-item checkbox_label mo-checkbox" >  
                        <input class=" mo-checkbox_input order_checkbox " {% if star_eq == 1 %}checked{% endif %}  style=" flex-shrink: 0;" type="radio" name="star_eq" value="1"/>
                        <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>&#9733; &#x2606; &#x2606; &#x2606; &#x2606;
                      </label>
                    </div>
                </df-oemmenu-warp>
              </df-oemmenu>
  
          </div>
          <div class="drawer-footer df-flex df-gap-4" style="padding: 16px 15px;border-top: 1px solid #E9E9E9;">
            {% if section.settings.tag_type != 1 %}
            <div class="drawer-btn secondary_btn df-px-5 filter_clear drawer-close">{{lang.collections.detail.clear_all | default:"Clear all"}}</div>
            {% endif %}
            <div class="drawer-btn main_btn df-flex-1 drawer-close" id="filter_submit">{{lang.cart.list.apply | default:"Apply"}}</div>
          </div>
        </div>
      
      </df-oemdrawer-popup-warp>
    </df-oemdrawer-popup>
  </df-oemdrawer>

  <div class="comments_detail-comment-wrap" style="margin-top: 20px;">
    {% assign commentsLangth = product_comment.comments | size %}
    {% if commentsLangth %}
    <div id="comments_detail-warp"></div>
    {% else %}
		{% include empty ,{text:lang.comments.no_comments,icon:'comment'}%}
    {% endif %}
  </div>

  {% include pagination ,{ paginate : paginate } %}

 
</div>

{% include 'page_back_button',href:"" %}

{% raw %}
<script type="text/x-template" id="id-collection-product-temp">
  {% for img in  imgs  %}
  <div class="upload-picture-card">
    <div class="upload-picture-close">
      <svg t="1633762187025" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2316" width="14" height="14">
        <path
          d="M1001.648365 134.577728a30.999519 30.999519 0 0 0-27.529848-31.283918 208.237136 208.237136 0 0 0-36.573745-3.75407q-162.164456-0.398159-324.215152 0c-41.806691 0-42.318609 0-42.03421-41.294772a47.608436 47.608436 0 0 0-22.240022-48.632273A75.650202 75.650202 0 0 0 478.012454 8.645737a48.859792 48.859792 0 0 0-22.751941 56.197293c0.625678 4.664148-0.284399 9.555815 0.398159 14.219963 2.388954 16.153878-4.095349 20.931785-20.306107 20.874906-82.475784 0-164.951569 1.080717-247.370473 1.592636-41.636051 0-83.272102-0.341279-125.135673 0-21.841863 0.284399-39.417737 7.280621-40.214055 33.729751a37.370062 37.370062 0 0 0 37.370062 41.351652 112.622106 112.622106 0 0 0 31.227039 0.2844c22.751941-3.299031 30.203201 3.81095 29.861922 28.439925-1.478876 119.447688-0.682558 238.895376-0.682559 358.343064v355.61283a92.088479 92.088479 0 0 0 102.668132 104.147008q290.087242 0.682558 580.174483 0a91.7472 91.7472 0 0 0 102.383733-104.033248c0.341279-80.598749 0-161.197499 0-241.796248 0-157.443428 0.625678-314.829977-0.625679-472.102766 0-24.401456 6.598063-31.795837 29.748163-28.439926a80.37123 80.37123 0 0 0 44.650683-5.687985 35.606787 35.606787 0 0 0 22.240022-36.801264z m-252.3759 807.693889q-240.488011 0.853198-480.976023 1.933915c-52.898262 0-69.222779-16.438277-69.279659-69.791578V541.382425c0-112.906505 0.455039-225.81301-0.455039-338.719515 0-19.05475 3.469671-25.709693 24.344576-25.652813q290.087242 1.308237 580.686403 0c19.339149 0 22.751941 6.086144 22.75194 23.889538 0 221.091982 0.398159 442.183964 0.455039 663.219066 0.284399 60.349522-17.689634 77.640997-77.527237 77.868517z"
          fill="#ffffff" p-id="2317">
        </path>
        <path
          d="M440.699271 565.613241c0 78.380435 0.284399 156.76087 0 235.141306 0 34.127911-26.562891 52.784502-52.613862 38.678299a41.749811 41.749811 0 0 1-18.997871-42.603009V532.964207 337.013119c0-35.379268 11.887889-52.272583 36.403105-51.931304s35.208628 17.063955 35.208628 53.182661v227.348765z m229.112041-4.436628v253.115338c0 32.478395-15.585079 52.272583-39.815896 51.533146s-38.1095-19.566669-38.16638-50.395549v-509.074669c0-32.193996 13.480525-48.859792 38.28014-49.201071s39.531497 17.462114 39.815896 50.850587q-0.17064 126.614549-0.17064 253.172218z"
          fill="#ffffff" p-id="2318">
        </path>
      </svg>
    </div>
    <img src="{{img|public_front_asset_url}}">
    {% assign params = img|public_front_asset_url|parseUrlParams %}
    {% if params.video %}
       <svg class="vedio-icon" width="24" p-id="7442" t="1661151421785" version="1.1"
              viewbox="0 0 1024 1024" height="24" xmlns="http://www.w3.org/2000/svg">
              <path d="M1024 512.236308A512 512 0 1 1 512 0a512.590769 512.590769 0 0 1 512 512.236308"
                fill="#D9DFE9" p-id="7443"></path>
              <path
                d="M691.396923 512.236308a58.801231 58.801231 0 0 1-12.248615 36.312615 187.352615 187.352615 0 0 1-14.217846 15.990154l-3.072 2.953846a775.876923 775.876923 0 0 1-203.106462 135.364923 176.482462 176.482462 0 0 1-47.261538 13.942154h-2.008616a64.196923 64.196923 0 0 1-56.477538-33.792 276.873846 276.873846 0 0 1-12.248616-45.331692 903.837538 903.837538 0 0 1-7.640615-126.03077 780.327385 780.327385 0 0 1 8.664615-129.96923 323.308308 323.308308 0 0 1 9.176616-36.352 65.024 65.024 0 0 1 28.514461-30.79877 72.625231 72.625231 0 0 1 32.019693-7.483076 176.915692 176.915692 0 0 1 42.299076 11.460923 779.067077 779.067077 0 0 1 207.675077 137.334153c7.168 7.010462 14.808615 15.478154 16.817231 17.447385a61.833846 61.833846 0 0 1 13.233231 38.793846"
                fill="#555273" p-id="7444"></path>
            </svg>
    {% endif %}
  </div>
  {% endfor  %}
</script>
<script type="text/x-template" id="id-popup-write-comment">
   
    <div class="moi-write-comment">
      <svg t="1633749174089" class="close popup-claer" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2174" width="12" height="12">
        <path d="M571.008 511.936l313.088-311.04a42.688 42.688 0 0 0 0-58.816l-2.496-2.496a40.384 40.384 0 0 0-56.704 0l-313.088 313.6-313.088-311.04a40.384 40.384 0 0 0-56.704 0l-2.496 2.496a42.688 42.688 0 0 0 0 58.816l313.088 308.608-313.088 311.04a42.688 42.688 0 0 0 0 58.816l2.496 2.496a40.384 40.384 0 0 0 56.704 0l313.088-313.6 313.088 311.04a40.384 40.384 0 0 0 56.704 0l2.496-2.496a42.688 42.688 0 0 0 0-58.816z" fill="#1D1F21" p-id="2175">
        </path>
      </svg>
      <div class="plugin-write-comment-top"></div>
      <div class="header">
        <img class="header-img" src="" alt="" />
        <div class="header-score">
          {% for index in (1..5) %}
          <svg t="1632626527998" class="score-icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7121" width="16" height="16">
            <path d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z" fill="{{theme_config.global.product_score_uncheck_color | default:'#bbbbbb'}}" p-id="7122">
            </path>
          </svg>
          {% endfor %}
        </div>
      </div>
      <div class="mo-form" id="comment-form">
      

        <div class="mo-form-item" name='customer_name'>
          <div class="mo-form-item-value">
            <input class="mo-form-input" type="text" value="{% if customerInfo.first_name %}{{customerInfo.first_name}} {{customerInfo.last_name}}{% endif %}" placeholder="{{lang.comments.your_name_here}}{% if storeConfig.comments_username_require == '1' %} *{% endif %}" />
          </div>
        </div>
        <div class="mo-form-item" name='customer_email'>
          <div class="mo-form-item-value">
            <input class="mo-form-input" type="text" value="{{customerInfo.email}}" placeholder="{{lang.comments.your_email_here}} *" />
          </div>
        </div>

        {% if  storeConfig.comments_title_require and storeConfig.comments_title_require != '0' %}
          
          <div class="mo-form-item" name='title'>
            <div class="mo-form-item-value">
              <input class="mo-form-input" type="text" value="{% if customerInfo.title %}{{customerInfo.title}} {{customerInfo.title}}{% endif %}" placeholder="{{lang.comments.your_title_here}}{% if storeConfig.comments_title_require == '1' %} *{% endif %}" />
            </div>
          </div>
          {% endif %}
        <div class="mo-form-item" name='content'>
          <div class="mo-form-item-value">
            <textarea class="mo-form-textarea" value="" placeholder="{{lang.comments.your_experience_here}} *" maxlength="2000"></textarea>
          </div>
        </div>
        <div class="mo-form-item">
          <div class="mo-form-item-value">
            <div class="upload" id="card-upload">
              <div id="card-upload-img" style="display: flex;flex-flow: wrap;"></div>
              <label class="upload-select-card">
                <input type="file" multiple accept="image/*,video/*"  id="file-upload" />
              </label>
            </div>
          </div>
        </div>
          {% if showCodeRange  %}
          <div class="mo-form-item" name='img_code'>
            <div class="mo-row">
              <div class="mo-col-8">
                <div class="mo-form-item-value">
                  <input class="mo-form-input" type="text" placeholder="{{lang.comments.enter_here}} *" />
                </div>
              </div>
              <div class="mo-col-4" style="padding-left: 20px">
                <img class="code-img" src="/code" id="code"  onclick="this.src='/code?'+Math.random();" />
              </div>
            </div>
          </div>
          {% endif %}
        <div class="mo-form-item">
          <div class="mo-form-item-value">
            <a id='confirm' class="main_btn" style="width:100%">{{ lang.comments_detail.submit | upcase }}</a>
          </div>
        </div>
      </div>
    </div>
</script>
{% endraw %}
{% include comment %}

<script type="text/javascript">
(function () {
    window.customerInfo = {{ customerInfo | json}};
    var commentLayerHtml = $("#id-popup-write-comment").html();
    const uploadTemplate = $("#id-collection-product-temp").html();
    var comment;

    var params = {};
    var currentOption = {};
    var upSelectCard; //= comment.find(".upload-select-card");
    var uploadCard; //= comment.find("#card-upload");
    var scoreIconNode; // = comment.find(".score-icon");

    /**
    * 将秒数格式化为 HH:MM:SS 格式（固定格式 xx:xx:xx）
    * @param {number} seconds - 秒数
    * @returns {string} 格式化后的时间字符串
    */
    function formatDurationToHHMMSS(seconds) {
        // 确保输入是数字
        const totalSeconds = Math.floor(parseFloat(seconds) || 0);
        
        // 计算小时、分钟和秒
        const hours = Math.floor(totalSeconds / 3600);
        const minutes = Math.floor((totalSeconds % 3600) / 60);
        const secs = totalSeconds % 60;
        
        // 使用 padStart 确保两位数格式
        const formattedHours = hours.toString().padStart(2, '0');
        const formattedMinutes = minutes.toString().padStart(2, '0');
        const formattedSeconds = secs.toString().padStart(2, '0');
        
        return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
    }

    /**
    * 获取视频第一帧作为封面图
    * @param {File} file - 视频文件
    * @returns {Promise<string>} 返回Base64格式的图片数据
    */
    function getVideoFirstFrame(videoURL) {
      return new Promise((resolve, reject) => {
          const video = document.createElement('video');
          video.src = videoURL;
          video.crossOrigin = 'anonymous';
          video.preload = 'metadata';
          video.currentTime = 0.1; // 设置大于0的时间确保获取到帧

          video.addEventListener('loadedmetadata', () => {
              const canvas = document.createElement('canvas');
              canvas.width = video.videoWidth;
              canvas.height = video.videoHeight;
              const ctx = canvas.getContext('2d');

              video.addEventListener('seeked', () => {
                  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
                  const coverUrl = canvas.toDataURL('image/jpeg', 0.8);
                  resolve({coverUrl,width: video.videoWidth,height: video.videoHeight, duration: formatDurationToHHMMSS(video.duration)});
              });

              video.addEventListener('error', (err) => {
                  reject(err);
              });
          });

          video.addEventListener('error', (err) => {
              reject(err);
          });
      });
    }

    // Base64转Blob
    function dataURLtoBlob(dataurl) {
        const arr = dataurl.split(',');
        const mime = arr[0].match(/:(.*?);/)[1];
        const bstr = atob(arr[1]);
        let n = bstr.length;
        const u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    }

    function writeComment(option) {
        const defaultOption = {
            product_id: "",
            star: "",
            content: "",
            customer_name: "",
            customer_email: "",
            comment_title: "",
            images: {
                src: []
            },
            img_code: ""
        };

        $.extend(params, defaultOption, option);
        const popupLayer = moi.popup();
        let showCodeRange = false;
        if(storeConfig.show_front_img_code_range && storeConfig.show_front_img_code){
          if(JSON.parse(storeConfig.show_front_img_code_range).includes('comment') && storeConfig.show_front_img_code == "1" ){
            showCodeRange = true
          }
        }
        engine.parseAndRender(commentLayerHtml, {
                customerInfo: customerInfo,
                storeConfig:storeConfig,
                showCodeRange:showCodeRange,
                lang: lang
            }).then(function (liquidHtml) {
                popupLayer.addContent(liquidHtml);
                moi.onEvent('showCommentPopupBox');
                
                comment = popupLayer.temp;
                upSelectCard = comment.find(".upload-select-card");
                uploadCard = comment.find("#card-upload");
                scoreIconNode = comment.find(".score-icon");
                //Set up to review product images
                comment.find(".header-img").attr("src", option.img);
                currentOption = option;

                scoreIconNode.on("click", function () {
                    const index = $(this).index();
                    initScore(index);
                });
                initScore(4);
                initUpload();
                submit();
            });

        return {
            close: function () {
                popupLayer.close();
            }
        };
    }

    function initScore(index) {
        params.star = index + 1;
        for (let i = 0; i < 5; i++) {
            if (i <= index) {
                scoreIconNode.eq(i).attr("class", "score-icon score-icon-active");
            } else {
                scoreIconNode.eq(i).attr("class", "score-icon");
            }
        }
    }


    function getFormData(file, retData){
        var suffix = file.name.split(".").pop();
        var fileName = new Date().getTime() + Math.floor(Math.random() * 10000000) + "." + suffix;
        var formData = new FormData();
        var bucket = retData.dir + fileName;
        var imgPath = "";
        if( _GET_C_SETTING_("platform") == "2"){ //huawei
          formData.append('key', bucket)
          formData.append('x-obs-acl', 'public-read')
          formData.append('policy', retData.policy || '')
          formData.append('AccessKeyId', retData.accessid || '')
          formData.append('signature', retData.signature || '')
          formData.append('file', file);
          imgPath = retData.cdn_url +  bucket;

        }else{
          formData.append("OSSAccessKeyId", retData.accessid || "");
          formData.append("policy", retData.policy || "");
          formData.append("signature", retData.signature || "");
          formData.append("name", fileName);
          formData.append("key", bucket || "");
          formData.append("success_action_status", "200");
          formData.append("file", file);
          imgPath = retData.cdn_url +  bucket;
        }
        
        return {formData,imgPath}
    }

    function fetchPromise(url, options) {
        return new Promise((resolve, reject) => {
            fetch(url, options)
                .then(response => {
                    resolve(response);
                })
                .catch(error => {
                    reject(error);
                });
        });
    }

    async function uploadOSSVideo(file, retData, callback) {
      const videoURL = URL.createObjectURL(file)
      const coverImageData = await getVideoFirstFrame(videoURL);
      const coverBlob = await dataURLtoBlob(coverImageData.coverUrl);
      // 创建一个虚拟文件名
      const coverFileName = file.name + '.jpg';
      const coverFile = new File([coverBlob], coverFileName, { type: 'image/jpeg' });
      let imgResult = getFormData(coverFile, retData);
      await fetchPromise(retData.host, {
          method: "POST",
          body: imgResult.formData,
          mode: 'no-cors', // no-cors, *cors, same-origin
          cache: 'no-cache'
      });
      let videoResult = getFormData(file, retData);
      await fetchPromise(retData.host,{
          method: "POST",
          body: videoResult.formData,
          mode: 'no-cors', // no-cors, *cors, same-origin
          cache: 'no-cache'
      });
      callback && callback();
      let resultImgPath = imgResult.imgPath + `?video=${videoResult.imgPath}&width=${coverImageData.width}&height=${coverImageData.height}&duration=${coverImageData.duration}&file_size=${file.size}`;
      params.images.src.push(resultImgPath);
      engine.parseAndRender(uploadTemplate, {
          imgs: params.images.src
      }).then(function (liquidHtml) {
          uploadCard.find("#card-upload-img").html($(liquidHtml));

          if (params.images.src.length === 5) {
              uploadCard.find(".upload-select-card").hide();
          }
      });
    }
    function uploadOSS(file, retData, callback) {
        if (file.type.startsWith('video/')) {
          uploadOSSVideo(file, retData, callback);
          return;
        }
        var {formData,imgPath} = getFormData(file, retData);
        fetch(retData.host, {
            method: "POST",
            body: formData,
            mode: 'no-cors', // no-cors, *cors, same-origin
            cache: 'no-cache'
        }).then((result) => {
            callback && callback();
        }).then((result) => {
                params.images.src.push(imgPath);
                engine.parseAndRender(uploadTemplate, {
                        imgs: params.images.src
                    }).then(function (liquidHtml) {
                        uploadCard.find("#card-upload-img").html($(liquidHtml));

                        if (params.images.src.length === 5) {
                            uploadCard.find(".upload-select-card").hide();
                        }
                    });
        }).catch((err)=>{
            callback && callback();
            alert("Upload error",err)
        });
    }
    function initUpload() {
        comment.on("change", "#file-upload", function (e) {
            var e = e || window.event;
            var files = e.target.files;
            var total = files.length; 
            var hasLargeFile = false;
            var largeFileLength = 0;
            if (params.images.src.length + files.length > 5) {
                comment.find("#file-upload").val("");
                return alert("Upload a maximum of 5 images");
            }
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                if (file.size > 10 * 1024 * 1024) {
                  hasLargeFile = true;
                  largeFileLength++
                }
            }
            if (hasLargeFile) {
              comment.find("#file-upload").val("");
              return alert(lang.account.orders.property_file_max.replace('{numbers}', largeFileLength));
            }


            var load = moi.nodeShowLoading(upSelectCard, "mo-loading-black");

            moi.ajax({
                url: `/upload_sign`,
                success(ret){
                    var retData = ret.data;
                    for (let i = 0; i < files.length; i++) {
                        const file = files[i];
                        uploadOSS(file, retData, function () {
                            total = total - 1;
                            if (total === 0) {
                                comment.find("#file-upload").val("");
                                load.close();
                            }
                        });
                    }
                }
            });
        });
        uploadCard.on("click", ".upload-picture-card", function () {
            var index = $(this).index();
            params.images.src.splice(index, 1);
            engine.parseAndRender(uploadTemplate, {
                    imgs: params.images.src
                }).then(function (liquidHtml) {
                    uploadCard.find("#card-upload-img").html($(liquidHtml));

                    if (params.images.src.length < 5) {
                        uploadCard.find(".upload-select-card").show();
                    }
                });
        });
    }

    function submit() {
        comment.find("#confirm").on("click", function () {
            let username_require =  storeConfig.comments_username_require;
            username_require = username_require === undefined ? '1' : username_require;
            const rules = {
                code: [{ required: true, message: lang.comments.ruleCode }],
                customer_email: [{ required: true, message: lang.comments.ruleEmail }],
                customer_name: [{ required: username_require == '1'?true:false, message: lang.comments.ruleName }],
                title: [{ required: storeConfig.comments_title_require == '1'?true:false, message: lang.comments.ruleTitle }],
                content: [{ required: true, message: lang.comments.ruleContent }]
            };
            var form = moi.form("#comment-form", rules);
            var formParams = moi.paramsValueString(form.allValue());
            if (form.allVerify()) {
                params.img_code = formParams.img_code;
                params.content = formParams.content;
                params.comment_title = formParams.title;
                params.customer_email = formParams.customer_email;
                params.customer_name = formParams.customer_name;
                currentOption.submit && currentOption.submit.call(this, params);
            }
        });
    }
    window.writeComment = writeComment;
})();

</script>
<script type="text/javascript">

  (function(){
  var comment = {{product_comment.comments | pubic_front_imgcdn_replace |json}};
  var product = {{product_comment.product | pubic_front_imgcdn_replace | json}};
  if(document.referrer === "" ){
    $(".back-box").hide()
  }

  const waterfall = new waterfalls({
        id: "#comments_detail-warp",
        bottomDistance: 30,
        renderType: "liquid",
        renderComplete(node) {
          {% comment %} window.addLazyImages && addLazyImages(node.find("img[data-src]")); {% endcomment %}
          node.find('.comment_warp-images img').click(function () {
            const JqThis = $(this);
            const parentIndex = JqThis.data("parent");
            moi.pictureImages(comment[parentIndex].images.src, JqThis.data("index") - 1, JqThis)
          })
        },
        resizeConfig: [
          { min: 0, max: 1023, rowGutter: '20px', columnsGutter: '20px', columns: 1 },
          { min: 1024, rowGutter: '30px', columnsGutter: '30px', columns: 2 }
        ],
        render(data, callback) {
          engine.parseAndRender($("#id-comment-temp-block").html(), {
            comments: data.map((item) => {
              item.price = formatMoney(item.price, _GET_C_SETTING_("currency"));
              item.created_at_str = moi.formatZoneDate(item.created_at, "YYYY-mm-dd");
              item.replied_at_str = moi.formatZoneDate(item.replied_at, "YYYY-mm-dd");
              return item;
            }),
            data_from:'{{data_from}}',
            storeConfig: storeConfig,
            lang: lang,
          }).then(function (liquidHtml) {
            const node = $(liquidHtml);
            callback && callback.call(this, node)
          });

        }
  })
    if(comment.length){
      waterfall.addStorage(comment)
    }

    if(moi.getUrlParam('writeComment') == 'true') {
      showCommentPopup();
    }

    $(".write-comment").click(function (params) {
      showCommentPopup();
    })

    function showCommentPopup() {
      var comment = writeComment({
        product_id:product.id,
        img:product.src,
        submit(params) {
            const load = moi.nodeShowLoading(this);
            moi.ajax({
                url: "/comments",
                type: 'post',
                data: JSON.stringify(params),
                complete: function () {
                    load.close();
                },
                success: function (data) {
                    if (!data.code) {
                        comment.close();
                        moi.message({
                            content:"{{lang.comments.comment_success}}",
                            onClose:function(){
                              if(moi.getUrlParam('writeComment') != '') {
                                let newUrl = location.href.replace(/([&?]writeComment=true)/, '')
                                location.replace(newUrl)
                              }else {
                                location.reload()
                              }
                              
                            }
                        })
                        return
                    }
                    $("#code").click()
                    return moi.alert({
                        title: !data.code ? "{{lang.comments.comment_success}}" : data.msg
                    });
                }
            });
        }
      });
    }

    function getWebFilterParams(){
      var sort_by = $('#sort_by').val();
      var is_image = $('#is_image').val();
      var star_eq = $('#star_eq').val();
      return {
        "sort_by": sort_by,
        "is_image": is_image,
        "star_eq":star_eq,
        "page": 1
      }
    }

    function webFilterChange(event){
        if($(event.target).val() == '0') {
          $(event.target).val('')
        }
        var filterParams =  getWebFilterParams();
        location.href = moi.setUrlParams(location.href, filterParams);
    }
		$('#sort_by').change(webFilterChange)
		$('#is_image').change(webFilterChange)
		$('#star_eq').change(webFilterChange)

    $(".filter_clear").click(function(){
      location.href = moi.setUrlParams(location.href, { "sort_by": "","is_image":"","star_eq":"","page": 1});
    })

    function getMobileFilterParams(){
      var sort_by = $('input[name="sort_by"]:checked').val();
      var is_image = $('input[name="is_image"]:checked').val();
      var star_eq = $('input[name="star_eq"]:checked').val();
      return {
        "sort_by": sort_by,
        "is_image": is_image,
        "star_eq":star_eq,
        "page": 1
      }
    }
    $("#filter_submit").click(function(){
      var filterParams =  getMobileFilterParams();
      location.href = moi.setUrlParams(location.href, filterParams);
    })
    


    $("body").on("click", "df-oemmenu df-oemmenu-label", function () {
        $(this).parent().find("df-oemmenu-warp").slideToggle()
        if($(this).parent().hasClass("df-oemmenu-acrive")){
          $(this).parent().find("df-oemmenu-warp").slideUp('slow',function(){
            $(this).parent().removeClass("df-oemmenu-acrive");
          });

        }else{
          $(this).parent().find("df-oemmenu-warp").slideDown('slow',function(){
          });
          $(this).parent().addClass("df-oemmenu-acrive"); 
        }
        
    });


    $("body").on("click", "df-oemdrawer df-oemdrawer-label", function () {
      var node = $(this).parent();
      node.addClass("df-oemdrawer-open");
      setTimeout(function () {
          node.find("df-oemdrawer-popup-warp").addClass("df-oemdrawer-popup-open");
      }, 100);
    });

    $("body").on("click", ".drawer-close", function () {
        var node = $(this).parents("df-oemdrawer");
        node.find("df-oemdrawer-popup-warp").removeClass("df-oemdrawer-popup-open");
        setTimeout(function () {
            node.removeClass("df-oemdrawer-open");
        }, 350);
    });
    $(".cursor-star").click(function(){ 
      var value = $(this).data("value");
      location.href = moi.setUrlParams(location.href, {star_eq:value});
    })
  })()
 
</script>